import './Scss/PersonnelAttendance.scss'
import { Http } from '../../../../Common/Api'
import { useSize, useRequest } from 'ahooks'
import { useState, useRef, useEffect } from 'react'
import { Column } from '@ant-design/plots'
import dayjs from 'dayjs'
import { FrontModalBox } from '../Modal'

export const PersonnelAttendance001 = () => {
    const [OptionsCall, setOptionsCall] = useState()
    const { run: geyPersonStatTemperatureStat } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.forEach(({ organizationName, attendanceNum, personNum, organizationUuid }) => {
                data = [
                    ...data,
                    { name: '进场人数', type: organizationName, value: personNum, organizationUuid },
                    { name: '出勤人数', type: organizationName, value: attendanceNum, organizationUuid },
                ]
            })
            setChartsData(data)
        },
    })
    useEffect(() => {
        geyPersonStatTemperatureStat({
            url: `getPersonStatTemperatureStat`,
            data: { year: dayjs().format('YYYY'), month: dayjs().format('MM'), date: dayjs().format('DD') },
        })
    }, [geyPersonStatTemperatureStat])
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [ChartsData, setChartsData] = useState([])
    const [ChartsOne, setChartsOne] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data: ChartsData,
                isGroup: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                legend: {
                    layout: 'horizontal',
                    position: 'top',
                    offsetX: -24,
                    itemName: { style: { fill: 'white', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setChartsOne(config)
        }
    }, [ChartsData, size])

    return (
        <div className="PersonnelAttendance001" ref={ChartsBox}>
            {ChartsOne && (
                <Column
                    {...ChartsOne}
                    onReady={plot =>
                        plot.on('plot:click', e => {
                            const { x, y } = e
                            const [{ data }] = plot.chart.getTooltipItems({ x, y })
                            setOptionsCall({
                                type: 'TableList',
                                data: {
                                    title: '出勤人员统计',
                                    uuid: data.organizationUuid,
                                    type: 'SecondaryTemperatureTemplate',
                                },
                            })
                        })
                    }
                />
            )}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
